<style>
.homeContain {
    padding: 100px 100px 0 100px;
    background-image: url("../assets/image/home-back.png");
}

.home_main {
    display: flex;
    background: white
}

.aside_left_container {
    /* position: sticky;
    top: 0; */
    height: calc(100vh - 50px);
    height: 100vh;
    width: 150px;
    background: rgb(246, 247, 248);
}

.aside_left {
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .aside_left_item {
        position: relative;
        font-size: 18px;
        width: 150px;
        color: rgb(98, 102, 108);
        background: rgb(246, 247, 248);
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0px 10px;
        padding: 15px 0;
        border-radius: 10px;

        p {
            z-index: 1;
        }

        .selected_svg {
            position: absolute;
            top: 25px;
            z-index: 0;
        }
    }

    .aside_left_item:hover {
        background: rgb(226, 228, 230);
        animation: changeFontSize 1s;
    }

    .selected {
        background-color: white !important;
    }
}

.mid_container {
    width: calc(100% - 150px);
    display: flex;
    /* flex-direction: column; */
    justify-content: space-evenly;
    align-items: flex-start;
    ;
    flex-wrap: wrap;
    padding-left: 20px;

    .rankings_list {
        display: flex;

        .rankings_option {
            padding: 10px;
            margin: 10px;
            background: #b8db70;
            border-radius: 5px;
        }

        .rankings_option:hover {
            background: #50ec7b;
        }
    }
}

.rankings_select {
    background: #50ec7b !important;
}

@keyframes changeFontSize {

    0%,
    100% {
        font-size: 18px;
    }

    50% {
        font-size: 22px;
    }
}
</style>
<template>
    <div class="homeContain">
        <div style="border-radius: 20px;">
            <HomeTop style="position: sticky;top: 0; z-index: 99;" />
            <div style="height: 30px;background: white;"></div>
            <div class="home_main">
                <div class="aside_left_container">
                    <div class="aside_left" v-for="(item, index) in optionList" :key="index" @click="selectItem(index)">
                        <div :class="{ aside_left_item: true, selected: selected === index }">
                            <p>{{ item.label }}</p>
                            <div class="selected_svg">
                                <svg width="150" height="30" xmlns="http://www.w3.org/2000/svg"
                                    v-if="selected === index">
                                    <path id="arc" fill="none" stroke="#50ec7b" stroke-width="5"
                                        d="M50 15 Q 75 5, 100 15" stroke-dasharray="0 1000">
                                        <animate attributeName="stroke-dasharray" from="0 1000" to="1000 0" dur="5s"
                                            repeatCount="indefinite" />
                                    </path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mid_container">
                    <div style="width: 100%; text-align: center;font-size: 24px;">教程列表</div>
                    <div v-for="(item, index) in postItemData" :key="item.id" @click="toDetail(item.id)"
                        v-if="selected != 1" style="width: 40%;">
                        <PostItem :post="item" style="width: 100%;" />
                    </div>
                    <!-- <div > -->
                        <div class="rankings_list" style="width: 100%;">
                            <div v-for="(item, index) in rankingsOption" :key="index"
                                @click="getRankingsData(item.value); rankingsSelect = index" class="rankings_option"
                                :class="{ rankings_select: index == rankingsSelect }">
                                {{ item.label }}
                            </div>
                        </div>
                        <div v-for="(item, index) in postItemData" :key="item.id" @click="toDetail(item.id)"
                            style="width: 40%;" v-if="selected == 1">
                            <PostItem :post="item" style="width: 100%;" />
                        </div>
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HomeTop from '../components/HomeTop.vue'
import PostItem from '../components/PostItem.vue'
import request from '@/utils/request'
import { newPage } from '@/utils/commonFunction'
import { SpecialEnum } from '@/utils/commonEnum'
export default {
    components: {
        HomeTop,
        PostItem
    },
    data() {
        return {
            selected: 0,
            rankingsSelect: 0,
            postItemData: [
            ],
            rankingsOption: [
                {
                    label: "点赞榜",
                    value: "likes"
                },
                {
                    label: "浏览榜",
                    value: "views"
                },
                {
                    label: "收藏榜",
                    value: "collectCount"
                },
            ],
            params: {
                pageNum: 1,
                homeOptions: 0,
            },
            myInfo: null,
            loading: false,
        }
    },
    created() {
        this.getData();
    },
    activated() {
        console.log(132456);
    },
    mounted() {
        this.myInfo = JSON.parse(localStorage.getItem('userInfo'));
        // 监听window滚动事件
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        // 组件销毁前移除监听器
        window.removeEventListener('scroll', this.handleScroll)
    },
    computed: {
        optionList() {
            return Object.values(SpecialEnum);
        },
    },
    methods: {
        selectItem(index) {
            this.selected = index; // 点击时更新 selected 的值
            switch (index) {
                case 0:
                    this.params = {
                        pageNum: 1,
                        homeOptions: 0,
                    }
                    this.getData();
                    break;
                case 1:
                    this.getRankingsData("likes")
                    break;
                case 2:
                    this.params = {
                        pageNum: 1,
                        homeOptions: 2,
                    }
                    this.getCollectPost();
                    break;
                case 3:
                    this.params = {
                        pageNum: 1,
                        homeOptions: 3,
                    }
                    this.getFollowPost();
                    break;
            }
        },
        toDetail(id) {
            let url = `/PostDetail?id=${id}`;
            newPage(url);
        },
        getData() {
            request.get("posts", {
                params: this.params
            }).then(res => {
                if (res.length == 0) {
                    this.params.pageNum -= 1;
                }
                // this.postItemData = res;
                this.postItemData = [...this.postItemData, ...res];

            });
        },
        getRankingsData(type) {
            request.get(`rankings/${type}`).then(res => {
                console.log(res);
                this.postItemData = res.data;
            });
        },
        getCollectPost() {
            let id;
            if (this.myInfo) {
                id = this.myInfo.id;
            } else {
                this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
                this.postItemData = [];
                return
            }
            request.get(`sys_users/getCollectPost/${id}`, {
                params: this.params
            }).then(res => {
                this.postItemData = res.data.map(item => {
                    return {
                        cover: item.cover,
                        title: item.title,
                        content: item.content,
                        summary: item.summary,
                        id: item.id,
                        likes: item.likes,
                        views: item.views,
                        author: item.author,
                        author_id: item.authorId,
                        create_time: item.createTime,
                        update_time: item.updateTime,
                        content: item.content,
                        category: item.category,
                        collect_count: item.collectCount
                    };
                });
            });
        },
        getFollowPost() {
            let id;
            if (this.myInfo) {
                id = this.myInfo.id;
            } else {
                this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
                this.postItemData = [];
                return
            }
            request.get(`sys_users/getFollowPost/${id}`, {
                params: this.params
            }).then(res => {
                this.postItemData = res.data;
            });
        },
        handleScroll() {
            const scrollTop = window.scrollY; // 滚动的高度
            const windowHeight = window.innerHeight; // 可视窗口高度
            const documentHeight = document.documentElement.scrollHeight; // 文档的总高度

            // 当滚动距离加上可视窗口高度等于或大于文档高度时，触发方法
            if (scrollTop + windowHeight >= documentHeight) {
                this.loadMore(); // 调用触底触发的方法
            }
        },
        loadMore() {
            console.log('触发加载更多的操作');
            this.loading = true; // 设置加载状态
            setTimeout(() => { // 模拟加载完成后重置标记
                this.loading = false;
            }, 1000); // 加载完成时间，可以根据实际需要调整
            this.params.pageNum += 1;
            this.getData()
        }
    },
}
</script>